<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[x]</title>
</head>

<body>
    <style>
        div {
            width: 450px;
            height: 150px;
            padding: 8px;
            position: relative;
            background-color: #ccffcc;
            border: 1px solid #33cc33;
        }
        a{
            color: brown;
            position: absolute;
            right : 22px;
            cursor: pointer;
        }
    </style>
    <div>
        <h3>1</h3>
        The past is our definition. We may strive, with good reason, to escape it or what is bad in it, but we will
        escape it only by adding things better to it.
    </div>
    <div>
        <h3>22</h3>
        The past is our definition. We may strive, with good reason, to escape it or what is bad in it, but we will
        escape it only by adding things better to it.
    </div>
    <div>
        <h3>333</h3>
        The past is our definition. We may strive, with good reason, to escape it or what is bad in it, but we will
        escape it only by adding things better to it.
    </div>
</body>
<script>
    let div = document.querySelectorAll('div');
    for (let i = 0; i < div.length; i++) {
        let a = document.createElement('a');
        a.innerHTML = '[x]';
        div[i].prepend(a);
        a.onclick = function() {
            div[i].remove();        //  等同a.parentNode.style.display = 'none';
       } 
    } 

</script>

</html>